<template>
  <view class="pb-20">
    <view v-if="dataList.length > 0">
      <view class="grid-body mt-30" v-for="(item, index) in dataList" :key="index">
        <uni-swipe-action>
          <uni-swipe-action-item>
            <view class="check grid-common">
              <view class="title flex">
                <text class="date">{{ item.createTime }}</text>
              </view>
              <!--msgStauts 1未读 2已读-->
              <view class="text-grey1 content" :class="item.msgStatus === '2' ? 'msg-read' : ''">{{
                item.msgContent
              }}</view>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
    </view>
    <view v-else>
      <Empty />
    </view>
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import { getWarningListForApp } from '@/api/message'
export default {
  components: {
    Empty
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dataList: [],
      pageTitle: ''
    }
  },
  onLoad(options) {
    this.pageTitle = options.title
    uni.setNavigationBarTitle({
      title: options.title
    })
  },
  onShow: function () {
    this.getList()
  },
  onPullDownRefresh() {
    this.pageNum = 1
    this.getList()
  },
  onReachBottom() {
    if (this.pageNum * this.pageSize < this.total) {
      this.pageNum++
      this.getList(false)
    }
  },
  onUnload() {
    uni.setStorageSync('readNoticeTitle', this.pageTitle)
  },
  methods: {
    async getList(isRefresh = true) {
      const { pageTitle, pageNum, pageSize } = this
      const params = {
        title: pageTitle,
        pageNum,
        pageSize
      }
      const { total, rows } = await getWarningListForApp(params).finally(() => uni.stopPullDownRefresh())
      if (isRefresh) {
        this.dataList = rows || []
      } else {
        this.dataList = [...this.dataList, ...rows]
      }
      this.total = total
    }
  }
}
</script>

<style lang="scss" scoped>
.check {
  position: relative;
  border-right: 2px;
  .title {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    .date {
      font-size: 24rpx;
      font-weight: 400;
      color: #bbbbbb;
    }
  }

  .content {
    font-size: 28rpx;
    word-break: break-all;
  }
}
.msg-read {
  color: #ccc;
}
</style>
